<template>
  <div>
    <splitpanes style="height: 90vh">
      <pane :min-size="10" :size="30">
        <div style="width: 100%; height: 98%;">
          <div style="border-bottom: 1px solid #ebeef5;">
            <el-button-group style="margin-top: 2px; margin-left: 2px; margin-bottom: 2px;">
              <el-tooltip content="返回" placement="top" :open-delay="500">
                <el-button type="primary" icon="el-icon-back" size="mini" @click="goBack" />
              </el-tooltip>
              <el-tooltip content="批量评审" placement="top" :open-delay="500">
                <el-button type="primary" size="mini" style="margin-left: 3px" @click="handleBatchReview"><svg-icon icon-class="batch" /></el-button>
              </el-tooltip>
            </el-button-group>
            <el-tooltip :open-delay="500" content="优先级" placement="top">
              <el-select v-model="treeFilter.priority" clearable placeholder="请选择优先级" size="mini" style="margin-left: 3px;; width: 65px;">
                <el-option v-for="item in priorityOptions" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-tooltip>
          </div>
          <div id="leftDiv" style="overflow-y: scroll; height: 100%;">
            <tree-component
              ref="treeComponent"
              catalog-label="目录"
              :element-label="eTitle"
              :tree-data="fullDate"
              show-checkbox
              readonly
              default-expand-all
              @choose-catalog="chooseCatalog"
              @choose-element="chooseElement"
              @data="checkData"
            />
          </div>
        </div>
      </pane>
      <pane :min-size="20" :size="70">
        <div id="rightDiv" style="overflow-y: scroll; width: 100%; height: 98%;">
          <el-tabs v-if="activeName" v-model="activeName" type="border-card" style="width: 100%;">
            <el-tab-pane v-if="activeName === 'catalog'" name="catalog" label="目录">
              <catalog-component
                ref="catalogComponent"
                :type="eType"
                :catalog-info="catalog"
                readonly
              />
            </el-tab-pane>
            <el-tab-pane v-if="activeName === 'element'" name="element" :label="eTitle">
              <test-case-view-component
                ref="testCaseViewComponent"
                v-model="testCaseVModelValue"
                @update="updateElement"
                @updateNext="updateNextElement"
                @next="nextElement"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </pane>
    </splitpanes>

    <el-dialog :visible.sync="batchReviewDialogFormVisible" width="450px" title="批量评审" :close-on-click-modal="false" center>
      <el-form ref="dataForm" label-position="left" label-width="80px">
        <el-form-item label="" prop="envName" label-width="0px">
          <div style="text-align: center;">批量评审用例，请选择 通过、不通过 或 点击 x 取消？</div>
        </el-form-item>
        <el-form-item label="评审备注">
          <el-input v-model="reviewRemark" placeholder="请输入评审备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="batchReview('评审不通过')">不通过</el-button>
        <el-button type="primary" @click="batchReview('评审通过')">通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.splitpanes__pane {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  border: 1px solid #ebeef5;
}
.splitpanes__splitter {
  width: 5px;
  margin-left: -1px
}
#leftDiv::-webkit-scrollbar, #rightDiv::-webkit-scrollbar {
  width: 0px;
}
* {
  font-family: "Helvetica", "Arial", sans-serif;
}
</style>

<script>
import { listTree as get_full_data } from '@/api/functional_test/test_case_manage/review_execute'
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import TreeComponent from '@/components/functional_test/Tree/index.vue'
import CatalogComponent from '@/components/functional_test/Catalog/index.vue'
import TestCaseViewComponent from '@/components/functional_test/TestCase/review_view.vue'
import { priorityOptions } from '@/enum/priority.js'
import { batchUpdateCaseStatus } from '@/api/functional_test/test_case_manage/review_execute'
import { batchAddReviewRemark } from '@/api/functional_test/test_case_manage/review_remark'
import { getEditStatusValue } from '@/enum/editStatus.js'

export default {
  components: { Splitpanes, Pane, TreeComponent, CatalogComponent, TestCaseViewComponent },
  data() {
    return {
      priorityOptions, // 优先级 options
      treeFilter: { // tree 过滤条件
        priority: ''
      },
      treeData: {
        type: 1, // 元素类型（caseType=功能测试用例 CatalogType=1，caseType=接口测试用例 CatalogType=3）
        parentId: 0,
        caseType: 1,
        projectId: this.$store.getters.projectId,
        reviewsId: this.$route.query.id
      },
      fullDate: [],
      suiteId: this.$route.query.id,
      eType: 1, // 元素类型
      eTitle: '测试用例',
      activeName: null, // 当前激活的 tab 名称
      currentCatalogId: 0, // 当前选中的 catalog ID
      catalog: {}, // catalog 对象
      caseType: this.$route.query.caseType, // 测试用例类型，1：手工用例，2：自动化用例
      testCaseVModelValue: {
        catalogId: 0,
        textMode: false
      },
      batchReviewDialogFormVisible: false, // 批量评审 弹窗
      checkedTestCases: [], // tree 中选中的测试用例
      reviewRemark: '' // 批量评审 备注
    }
  },
  watch: {
    // tree 过滤条件变化时候调用此方法
    treeFilter: {
      handler(value) {
        this.$refs.treeComponent.filter(value)
      },
      deep: true
    }
  },
  created() {
    this.get_full_data()
  },
  methods: {
    // tree：获取树形数据
    get_full_data() {
      get_full_data(this.treeData).then(response => {
        this.fullDate = response.data
      })
    },
    // tree：点击一个分类后调用此方法
    chooseCatalog(id) {
      this.activeName = 'catalog' // 设置当前 tab catalog
      this.currentCatalogId = this.catalog.id
      this.$nextTick(() => {
        this.$refs.catalogComponent.loadData(id)
      })
    },
    // tree：点击一个元素后调用此方法
    chooseElement(id) {
      this.activeName = 'element' // 设置当前 tab element
      this.$nextTick(() => {
        this.$refs.testCaseViewComponent.loadData(id, this.suiteId)
      })
    },
    // tree：修改成功后回调此方法
    updateElement(elementInfo) {
      this.$refs.treeComponent.updateNode(elementInfo)
    },
    // tree：修改并继续成功后回调此方法
    updateNextElement(elementInfo) {
      this.$refs.treeComponent.updateNextNode(elementInfo)
    },
    // tree 点击 next 成功后回调此方法
    nextElement() {
      this.$refs.treeComponent.nextNode()
    },
    // 返回
    goBack() {
      this.$router.back()
    },
    // 点击 批量评审
    handleBatchReview() {
      this.$refs.treeComponent.handleAllCheckedData() // 提交之前获取选择的数据
      if (!this.checkedTestCases || this.checkedTestCases.length === 0) {
        this.$message({ message: '请先勾选需要批量评审的测试用例后，再点击 批量评审 按钮!', type: 'error' })
        return
      }
      this.batchReviewDialogFormVisible = true
      this.reviewRemark = ''
    },
    // 批量评审
    batchReview(editStatus) {
      const ids = []
      for (const rowData of this.checkedTestCases) {
        ids.push(rowData.id)
      }

      // 批量更新测试用例编写状态
      batchUpdateCaseStatus({
        reviewsId: this.$route.query.id,
        caseStatus: getEditStatusValue(editStatus),
        testCaseIds: ids
      }).then(response => {
        // 更新 tree 节点的 图标
        let icon
        if (editStatus === '评审通过') {
          icon = 'pass'
        } else if (editStatus === '评审不通过') {
          icon = 'fail'
        }
        for (const rowData of this.checkedTestCases) {
          rowData.icon = icon
        }

        this.$refs.treeComponent.setCheckedKeys([]) // 清空已选中
        this.$message({ message: '批量评审用例 ' + editStatus + ' 成功!', type: 'success' })
      })

      // 批量添加评审备注
      batchAddReviewRemark({
        reviewsId: this.$route.query.id,
        caseStatus: getEditStatusValue(editStatus),
        remark: this.reviewRemark,
        testCaseIds: ids
      }).then(response => {
      })

      this.batchReviewDialogFormVisible = false
    },
    checkData(data) {
      this.checkedTestCases = data
    }
  }
}
</script>
